import React, { Component } from 'react'
import { 
    Form,
    Input, 
    Button,
    message, 
    } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import "./login.less"
import logo from "../../assets/images/logo.png"
import {reqLogin}from "../../api"
import memoryUtils from '../../utils/memoryUtils';
import storageUtils from '../../utils/storageUtils';
import { Redirect } from 'react-router';
/*
    登录的路由组件
 */

export default class Login extends Component {
    formRef = React.createRef();
    // onFinish仅校验通过后才能执行
    onFinish = async (values) => {
        const {username,password} = values;
        // console.log("提交登录的ajax请求:","username = ",username,"password = ", password);
        const result = await reqLogin(username,password);

        if(result.status === 0) {
            // 提示登录成功
            message.success("登录成功");

            // 保存user
            const user = result.data;
            memoryUtils.user = user; // 保存在内存中
            storageUtils.saveUser(user); // 保存到local
            
            // 跳转到后台管理界面 不需要再回退回来
            this.props.history.replace("/")
        } else {
            message.error(result.msg);
        }
        //console.log("请求成功", response.data);
        

        // 阻止事件的默认行为 v4已经默认取消了
        //values.preventDefault();
        // 获取表单项的输入数据
        // this.formRef.current.validateFields()
        // .then(
        // values => {
        //     const {username,password} = values;
        //     console.log("提交登录的ajax请求:","username = ",username,"password = ", password);
        //     reqLogin(username,password)
        //     .then(response => {
        //         console.log("成功了",response.data);
        //     })
        //     .catch(error =>{
        //         console.log("失败了", error);
        //     })    
        // })
    }

    // valiadator的自定义式验证
    /* validateUsN = (_, value) =>{
        if(!value) {
            return Promise.reject("用户名不能为空")
        } else if (value.length < 4) {
            return Promise.reject("用户名至少4位")
        } else if (value.length > 12) {
            return Promise.reject("用户名最多12位")
        } else if (!/^[A-z0-9_]+$/.test(value)) {
            return Promise.reject("用户名必须由英文、数字、和下划线构成")
        } else {
            Promise.resolve();
        }
    } */

    render() {
        // 如果用户已经登录,自动跳转到管理界面
        const user = memoryUtils.user;
        if(user && user._id) {
            return <Redirect to="/"/>
        }

        return (
            <div className="login">
                <header className="login-header">
                    <img src={logo} alt="logo" />
                    <h1>React项目: 后台管理系统</h1>
                </header>
                <section className="login-content">
                    <h2>用户登录</h2>
                    <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                    ref={this.formRef}
                    >
                        <Form.Item
                            name="username"
                            // 声明式验证,直接使用别人定义好的验证规则进行验证
                            rules={[
                            {
                                required: true,
                                message: '请输入用户名',
                            },
                            {
                                min: 4,
                                message: "用户名至少4位"
                            },
                            {
                                max: 12,
                                message: "用户名最多12位"                                
                            },
                            {
                                pattern:"^[A-z0-9_]+$",
                                message:"用户名必须由英文、数字、和下划线构成"
                            }
                            /* {
                                validator: this.validateUsN
                            } */
                        ]}   
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" style={{color: "rgba(0, 0, 0, .25)"}} />} placeholder="用户名" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            // 声明式验证,直接使用别人定义好的验证规则进行验证
                            rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                            {
                                min: 4,
                                message: "密码至少4位"
                            },
                            {
                                max: 12,
                                message: "密码最多12位"                                
                            },
                            {
                                pattern:"^[A-z0-9_]+$",
                                message:"密码必须由英文、数字、和下划线构成"
                            }
                            ]}
                        >
                            <Input
                            prefix={<LockOutlined className="site-form-item-icon" style={{color: "rgba(0, 0, 0, .25)"}} />}
                            type="password"
                            placeholder="密码"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }
}

/* 
1. 高阶函数 /柯里化函数
    1) 一类特别的函数
        a. 接受函数类型的参数
        b. 函数的返回值是函数
    2) 常见
        a. 定时器:setTimeOut() / setInterval()
        b. Promise: Promise(() => {}) then(value => {}, reason => {})
        c. 数组遍历相关的方法:forEach()/filter()/map()/reduce()/find/findIndex()
        d. 函数对象的bind()
        e. Form.create()()  /  getFieldDecorator()
    3) 高阶函数更新动态,更加具有扩展性
2. 高阶组件
    1) 本质是一个函数
    2) 接受一个组件(被包装),返回一个新的组件(包装组件),包装组件会向被包装组件传入特定属性
    新组件内部渲染被包装
    3) 高阶组件也是高阶函数:接受一个组件函数,返回是一个新的组件函数
*/

/*
    async 和 await
    1. 作用?
        简化promise对象的使用:不用再使用then()来指定成功/失败的回调
        以同步编码(没有回调函数)方式实现异步流程
    2. 那里写await?
        在返回promise的表达式左侧写await: 不想要promise,想要promise异步执行成功的value数据
    3. 哪里写async
        await所在函数(最近的)定义的左侧写async
    
    await外侧要包裹try catch捕获异常
 */
